<script type="text/javascript">
$( loadRankings );

function loadRankings() {
	$.ajax({
		type: "GET", 
	    url: "/rest/rankings/MEN",
	    dataType: "json",
	    beforeSend: function(){
			showLoading(true);
	    },
	    success: function(data){
	    	showLoading(false);
		    $("#rankinglist").text(data.rankinglist);
	    	if (data.rankings.length < 1) {
	    		$("#ranking_entry").html('No rankings found');
	    	} else {
	    		$.each(data.rankings, function(i, ranking){
					$("#ranking_entry").append('<span>'+ranking.rank+'</span> ');
					$("#ranking_entry").append('<span>'+ranking.trend+'</span> ');
					$("#ranking_entry").append('<span id="load_player" style="cursor: pointer;" onClick="javascript: loadPlayer('+ranking.player.id+')">'+ranking.player.nickname+' ('+ranking.player.id+')</span> ');
					$("#ranking_entry").append('<span>'+ranking.points+'</span>').append('<br/>');
		      	});
			}
		}
	});	
}

function loadPlayer(id) {
	loadContentAjax("/player.jsp?playerId="+id);
}

function showLoading(show) {
	if (show) {
		$("#content_rankings_body_loading").show();
		$("#content_rankings_body").hide();
	} else {
		$("#content_rankings_body_loading").hide();
		$("#content_rankings_body").show();
	}
}
</script>

<h2>RANKINGS</h2>
	<div id="content_rankings" align="center">
	<div id="content_rankings_body_loading" align="center">
		<img src='loading.gif' alt='loading...' />
	</div>
	<div id="content_rankings_body" align="center">
		<h3 id="rankinglist"></h3>
		<div id="ranking_head">
			<span>rank</span>
			<span>trend</span>
			<span>player(id)</span>
			<span>points</span>
		</div>
		<div id="ranking_entry"></div>
	</div>
</div>